<template>
  <div class="detail" ref="containerRef">
    <a-affix :target="(containerRef as HTMLElement)">
      <a-page-header title="消费明细" @back="back" class="head"> </a-page-header>
    </a-affix>

    <a-card title="基本信息" :bordered="false" class="item">
      <a-descriptions>
        <a-descriptions-item>
          <a-avatar>
            <img v-if="route.query.headimage && route.query.headimage !== ' '" :src="route.query.headimage" />
            <img v-else alt="avatar" src="@/assets/images/img／defaultAvatar@2x.png" />
          </a-avatar>
        </a-descriptions-item>
        <a-descriptions-item label="用户昵称">{{ route.query.name }}</a-descriptions-item>
        <a-descriptions-item label="手机号">{{ route.query.mobile }}</a-descriptions-item>
      </a-descriptions>
    </a-card>

    <a-card title="消费明细" :bordered="false" class="item">
      <a-table
        row-key="id"
        size="small"
        page-position="bl"
        :bordered="{ cell: true }"
        :loading="loading"
        :data="tableData"
        :scroll="{ x: '100%', y: '100%', minWidth: 1000 }"
        :pagination="{ showPageSize: true, showTotal: true, total: total, current: current, pageSize: pageSize }"
        @page-change="changeCurrent"
        @page-size-change="changePageSize"
      >
        <template #columns>
          <a-table-column title="ID" :width="80" data-index="id"></a-table-column>
          <a-table-column title="增减" data-index="numerial_status" :width="120">
            <template #cell="{ record }">
              <a-typography-text v-if="record.numerial_status == '+'" type="success">{{
                record.numerial_status
              }}</a-typography-text>
              <a-typography-text v-else type="danger">{{ record.numerial_status }}</a-typography-text>
            </template>
          </a-table-column>
          <a-table-column title="金额" data-index="numerial_number" :width="150"></a-table-column>
          <a-table-column title="说明" data-index="way_name"></a-table-column>
          <a-table-column title="备注" data-index="remarks"></a-table-column>
        </template>
      </a-table>
    </a-card>
  </div>
</template>

<script setup lang="ts" name="DataDetail">
import { ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { usePagination } from '@/hooks'
import { getCustomerDetail } from '@/apis'
const route = useRoute()
const router = useRouter()

const loading = ref(false)
const tableData = ref([])

const { current, pageSize, total, changeCurrent, changePageSize, setTotal } = usePagination(() => getTableData())

const getTableData = async () => {
  loading.value = true
  const res = await getCustomerDetail({
    customer_id: route.query.id,
    page: current.value,
    limit: pageSize.value
  })
  let resData = JSON.parse(res)
  if (resData.code === 200) {
    tableData.value = resData.result.data
    setTotal(resData.result.total)
    loading.value = false
  } else {
    loading.value = false
  }
}
getTableData()
const containerRef = ref<HTMLElement | null>()

const back = () => {
  router.back()
}
</script>

<style lang="scss" scoped>
.detail {
  overflow: auto;
  .head {
    background: var(--color-bg-1);
  }
  .item {
    margin: $margin;
    background: var(--color-bg-1);
    border-radius: 2px;
  }
}
</style>
